<template>
    <div class="article-list">
        <h3>旅游文章列表</h3>
        <!-- :data="filterTableData" -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="日期" prop="article_create_time" />
            <el-table-column label="作者" prop="article_author" />
            <el-table-column label="类型" prop="article_type" />
            <el-table-column label="导航" prop="nav_name" />
            <el-table-column label="是否推荐" prop="article_hot" />
            <el-table-column label="地址" prop="article_address" />
            <el-table-column label="标题" prop="article_title" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="page">
            <!-- :page-count="page" -->
            <el-pagination
            :page-size="pageSize"
           
            :pager-count="pageSize"
            layout="prev, pager, next"
            :total="totalNum"
            @change="changePageFn"
        />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { listArticleFunc,removeArticleFunc } from '../../api/request'
import { Paper } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 定义接口，形容对象的结构
interface Paper {
    id?:number|string
    article_id:number
    article_title: string
    article_author: string
    article_content: string
    article_type: string
    article_address: string
    article_tags: string
    nav_name: string
    article_create_time: string
    article_hot:string
}

// 总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(5)

const search = ref('')
const handleEdit = (index: number, row: Paper) => {
    // console.log(index, row)
}
const handleDelete = (index: number, row: Paper) => {
    // console.log(index, row)
    let {article_id,article_title} = row;
    // 二次确认删除
    ElMessageBox.confirm(`确定要删除“${article_title}”吗？`, '提示', {
        type: 'warning'
    })
    .then(() => {
        // 删除数据
        removeArticleFunc({article_id})
        .then(
            (content: any)=>{
                // console.log(222);
                ElMessage.success(content.data.msg);
                tableData.value.splice(index, 1);
                // 重新初始化
                paperListFn();
            },
            err=>{
                // console.log(111)
                ElMessage.error(err.msg);
            }
        )
       
      
    })
    .catch(() => { });
}

// 文章列表数据
const tableData: Paper[] = ref([])

// 定义函数获取文章列表
const paperListFn = async (page=1,pageSize=5)=> {
    // let token = localStorage.getItem("TOKEN")
    await listArticleFunc({page,pageSize}).then(
        (content:any)=>{
            // console.log(content)
            let {result, code  , total} = content.data;
            // console.log(result,code)
            if(code == 200) {
                tableData.value = result;
                totalNum.value = total;
            }
        }
    )
}

// 点击分页时执行的函数
const changePageFn = (num:number) => {
    // console.log(value)
    page.value = num;
    paperListFn(page.value, pageSize.value);
}

// 
paperListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.article-list {
    h3 {
        margin-bottom: 15px;
    }
}
</style>